<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form>
                <el-form-item>
                <el-button type="danger" icon="el-icon-add" @click="showCreate" v-if="hasPerm('dishesType:add')">添加
                </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="5">
                <p style="color: #989A9A;">菜品类型名</p>
                <el-input placeholder="输入菜品类型名" v-model="searchParam.typeName" @keyup.enter.native="getList('search')"></el-input>
            </el-col>
            <el-col :span="4">
                <p>&nbsp;</p>
                <el-button type="danger" @click="getList('search')">搜索</el-button>
            </el-col>
        </el-row>
        <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row>
            <el-table-column align="center" label="序号" min-width="12%">
                <template slot-scope="scope">
                <span v-text="getIndex(scope.$index)"> </span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="typeName" label="菜品类型名" min-width="20%" sortable></el-table-column>
            <el-table-column align="center" label="备注" >
                <template slot-scope="scope">
                <span>{{scope.row.remark}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="管理" min-width="15%" v-if="hasPerm('dishesType:edit')">
                <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-edit" @click="showUpdate(scope.$index)" size="small">修改</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNum"
            :page-size="pageInfo.pageSize"
            :total="totalCount"
            layout="prev, pager, next">
        </el-pagination>
        <el-dialog title="确认删除？" :visible.sync="deleteDialogShow">
            <div slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogShow = false">取 消</el-button>
                <el-button type="danger" @click="confirmDelete">确 认</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="400px">
            <el-form v-if="dialogStatus=='update'" class="small-space" :model="tempDishesType" label-position="left" label-width="70px"
                    style='width: 300px; margin-left:50px;'>
                <el-form-item label="菜品类型名">
                    <el-input type="text" v-model="tempDishesType.typeName">
                    </el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="tempDishesType.remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <el-form v-else class="small-space" :model="tempDishesType" label-position="left" label-width="90px"
                    style='width: 300px; margin-left:50px;'>
                <el-form-item label="菜品类型名">
                    <el-input type="text" v-model="tempDishesType.typeName">
                    </el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="tempDishesType.remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCancel">取 消</el-button>
                <el-button v-if="dialogStatus=='create'" type="danger" @click="createDishesType">创 建</el-button>
                <el-button type="danger" v-else @click="updateDishesType">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageInfo: {
                pageSize: 15,
                pageNum: 1
            },
            searchParam: {
                typeName: '',
            },
            listLoading: false,
            totalCount: 0,
            list: [],
            dialogStatus: 'create',
            dialogFormVisible: false,
            textMap: {
                update: '编辑',
                create: '添加菜品类型'
            },
            tempDishesType: {},
            deleteDialogShow: false,
        }
    },
    created() {
      this.getList()
    },
    methods: {
        handleSizeChange(val) {
            this.pageInfo.pageSize = val
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNum = val
            this.getList();
        },
        getIndex($index) {
            return (this.pageInfo.pageNum - 1) * this.pageInfo.pageSize + $index + 1
        },
        dialogCancel() {
            this.dialogFormVisible = false
            this.tempDishesType = {}
        },
        showCreate() {
            this.tempDishesType = {}
            this.dialogStatus = "create"
            this.dialogFormVisible = true
        },
        showUpdate($index) {
            this.tempDishesType = JSON.parse(JSON.stringify(this.list[$index]))
            this.dialogStatus = "update"
            this.dialogFormVisible = true
        },
        handleDelete($index) {
            let _vue = this;
            this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '确认',
                    showCancelButton: false,
                    type: 'warning'
            }).then(async () => {
                let dishes = _vue.list[$index]
                _vue.$api.dishesType.delete(dishes.id)
                _vue.$message.success('删除成功')
                _vue.getList()
            })
        },
        async getList(search) {
            if (!this.hasPerm('dishes:list')) {
                return
            }
            this.listLoading = true;
            let res
            if (search && search === 'search') {
                res = await this.$api.dishesType.search(this.pageInfo.pageSize, this.pageInfo.pageNum, this.searchParam)
            } else {
                res = await this.$api.dishesType.list(this.pageInfo.pageSize, this.pageInfo.pageNum, true)
            }
            this.listLoading = false
            this.list = res.data.data
            this.totalCount = res.data.total
        },
        async createDishesType() {
            await this.$api.dishesType.add(this.tempDishesType)
            this.getList()
            this.dialogFormVisible = false
        },
        async updateDishesType() {
            await this.$api.dishesType.edit(this.tempDishesType)
            this.getList()
            this.dialogFormVisible = false
        }
    }
}
</script>

<style>

</style>
